<template>
    <div class="list">
        <!--
        日期插件示例
        <DatePicker
                @on-change="(val)=>{search.createDateBegin=val[0];  search.createDateEnd=val[1]}"
                format="yyyy-MM-dd" type="daterange"></DatePicker>-->
        <Form ref="form" :model="search" :label-width="130" inline class="search">
            <#list filedNames as f >
                <FormItem label="${f.chName}">
                    <Input v-model="search.${f.fiName}" placeholder="${f.chName}" style="width:200px"></Input>
                </FormItem>
            </#list>
        </Form>
        <Row class="btn">
            <i-col span="24">
                <Button type="success" @click="loadData()">查询</Button>
                <Button type="success" @click="$router.push('add_${tableName}')">添加</Button>
                <Button type="error" @click="del()">删除</Button>
                <Button type="error" @click="edit()">编辑</Button>
            </i-col>
        </Row>
        <Row class="table">
            <i-col span="24">
                <Table border ref="list" :columns="columns" :data="page.list"></Table>
            </i-col>
        </Row>
        <Row calss="page">
            <i-col span="24">
                <Page :total="page.total" :page-size="page.pageSize" @on-change="loadData"></Page>
            </i-col>
        </Row>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                search: {},
                columns: [
                    {type: 'selection', width: 60, align: 'center'},
                    {
                        title: '名称', key: 'name', render(h, obj) {
                            return h('router-link', {
                                attrs: {
                                    to: "detail_${tableName}/" + obj.row.id,
                                },
                            }, obj.row.name);
                        }
                    },
                <#list filedNames as f >
                    {title: '${f.chName}', key: '${f.fiName}'},
                </#list>],
                page: {total: 0, list: []}
            }
        },
        methods: {
            loadData(val) {
                this.$sk.search({params: this.search, page: val, url: "/api/v1/${className?uncap_first}/list"});
            },
            del() {
                this.$sk.del("/api/v1/${className?uncap_first}/del");
            },
            edit() {
                this.$router.push("edit_${tableName}/" + this.$sk.getSelectedIds()[0]);
            },
            detail() {
                this.$router.push("detail_${tableName}/" + this.$sk.getSelectedIds()[0]);
            }
        },
        created() {
            this.loadData(1);
        }
    }
</script>